<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>系统设置</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div layout:fragment="content">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">系统设置</h1>
        <div class="btn-group">
            <button class="btn btn-outline-secondary">
                <i class="fas fa-sync-alt"></i> 刷新
            </button>
        </div>
    </div>

    <div class="container mt-5">
        <!-- 提示信息 -->
        <div th:if="${successMsg}" class="alert alert-success" th:text="${successMsg}"></div>
        <div th:if="${errorMsg}" class="alert alert-danger" th:text="${errorMsg}"></div>

        <!-- 配置表单 -->
        <form th:action="@{/settings}" method="post" class="mt-4">
            <!-- 网站基本配置 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>网站基本配置</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="site.name" class="form-label">网站名称</label>
                        <input type="text" class="form-control"
                               id="site.name" name="site.name"
                               th:value="${settings['site.name']}">
                    </div>
                    <div class="mb-3">
                        <label for="site.logo" class="form-label">LOGO路径</label>
                        <input type="text" class="form-control"
                               id="site.logo" name="site.logo"
                               th:value="${settings['site.logo']}">
                    </div>
                    <div class="mb-3">
                        <label for="site.description" class="form-label">网站描述</label>
                        <textarea class="form-control" id="site.description"
                                  name="site.description" rows="3"
                                  th:text="${settings['site.description']}"></textarea>
                    </div>
                </div>
            </div>

            <!-- 邮件配置 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>邮件配置</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="mail.smtp.host" class="form-label">SMTP服务器</label>
                        <input type="text" class="form-control"
                               id="mail.smtp.host" name="mail.smtp.host"
                               th:value="${settings['mail.smtp.host']}">
                    </div>
                    <div class="mb-3">
                        <label for="mail.smtp.port" class="form-label">SMTP端口</label>
                        <input type="number" class="form-control"
                               id="mail.smtp.port" name="mail.smtp.port"
                               th:value="${settings['mail.smtp.port']}">
                    </div>
                </div>
            </div>

            <!-- 存储配置 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5>存储配置</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="upload.maxSize" class="form-label">最大上传大小（字节）</label>
                        <input type="number" class="form-control"
                               id="upload.maxSize" name="upload.maxSize"
                               th:value="${settings['upload.maxSize']}">
                        <div class="form-text">10485760 = 10MB</div>
                    </div>
                </div>
            </div>

            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-primary">保存配置</button>
        </form>
    </div>

    <!-- 引入Bootstrap JS（可选，用于表单验证等） -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</div>

<div layout:fragment="scripts">
    <script>
        // 仪表板特定的JS代码
        console.log('仪表板加载完成');
    </script>
</div>
</body>
</html>